<?php
    session_start();    //只要用到了session就必须打开session
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员管理系统</title>
    <style>
        .main{width:80%; margin:0; text-align:center}
        h2{font-size:16px}
        h2 a{color:navy; text-decoration; none;margin-right:15px}
        h2 a:last-child{margin-right: 0}
        h2 a:hover{color:brown; text-decoration:underline}  /*悬停hover效果 */
        .none{width:20px; display: none}
    </style>
</head>
<body>
<div class="main">
    <form action="postLogin.php" method="post" onsubmit="return check()">
        <table align="center" border="1" style="..." cellpadding="5" cellspacing="0">
            <tr>
                <td align="right">用户名</td>
                <td align="left">
                    <input name="username" id="username" onblur="checkUsername()">
                    <span class="red">*</span>
                    <img src="img/Right.png" id="x1" class="none"></img>
                    <img src="img/Error.png" id="x0" class="none"></img>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left">
                    <input type="password" name="password">
                    <span class="red">*</span>
                </td>
            </tr>
            <tr>
            <tr>
                <td align="right">验证码</td>
                <td align="left">
                    <input  name="code" placeholder="请输入验证码"><img src="code.php" onclick="this.src='code.php';" width="80" height="40">
                    <span class="red">*</span>
                </td>
            </tr>
                <td></td>
                <td>
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    function checkUsername() {
        let username = $("#username").val().trim();
        if(username.length == 0) {
            $("#x0").hide();
            $("#x1").hide();
            return;
        } else {
            let username = document.getElementsByName('username')[0].value.trim();
            let usernameRag = /^[a-zA-Z0-9]{3,10}$/;
            if(!usernameRag.test(username)) {
                alert('用户名只能由字母大小写和数字构成，长度为3-10个字符');
                return;
            }
            $.ajax({
                url:"checkUsername.php",
                type:"post",
                dataType:"json",
                data:{username:username},
                success:function(d) {
                    if(d.code == 0) {
                        //表面用户名正常
                        $("#x0").hide();
                        $("#x1").show();
                    } else if(d.code == 2){
                        //说明用户名不正确
                        $("#x0").show();
                        $("#x1").hide();
                    }
                },
                error:function() {
                    $("#x0").hide();
                    $("#x1").hide();
                }
            })
        }
    }
    function check() {
        let username = document.getElementsByName('username')[0].value.trim();
        let password = document.getElementsByName('password')[0].value.trim();
        let usernameRag = /^[a-zA-Z0-9]{3,10}$/;
        if(!usernameRag.test(username)) {
            alert('请用户名，且只能由字母大小写和数字构成，长度为3-10个字符');
            return false;
        }
        //验证密码
        let passwordRag = /^[a-zA-Z0-9_*]{6,10}$/;
        if(!passwordRag.test(password)) {
            alert('密码必填，且只能由字母大小写和数字，以及 _ 和 * 构成，长度为3-10个字符');
            return false;
        }
        return true;
    }
</script>
</body>
</html>